// webpack五个核心概念
/* 
入口 entry
出口 outpupt
loader 帮助webpack识别哪些它不能识别的文件
plugins 可以压缩 打包做一些优化操作
mode模式 
开发模式  development 代码在本地进行开发测试运行环境
生产模式  production 代码上线运行的环境

webpack配置使用的模块化语法是 commonJS模块化语法
module.exports
exports.xx
require

webpack常用的loader plugin?
loader:less-loader css-loader style-loader sass-loader postcss-loader（用于补充css样式各种浏览器内核前缀，用于处理css兼容问题，需要和postcss、postcss-preset-env配合使用。）
babel-loader(将Es6+ 语法转换为Es5语法)
ts-loader
html-loader(想引入一个html页面代码片段赋值给DOM元素内容使用，这时就用到html-loader)
file-loader
url-loader
vue-loader
eslint-loader(用于检查代码是否符合规范，是否存在语法错误)

plugin插件
html-webpack-plugin(根据指定模板自动创建html文件，并且引入外部资源)
optimize-css-assets-webpack-plugin (用于压缩css，减小 css 打包后的体积。)
clean-webpack-plugin (为了在每次打包发布时自动清理掉 dist 目录中的旧文件)

webpack可以配置单页面spa 也可以配置多页面mpa   vue-cli 可以配置单页面 也可以配置多页面
单页面应用：只有一个html页面，所有的跳转切换都是组件切换完成的
优点：页面之间的切花和跳转流程 组件化开发 能复用
缺点：首屏加载慢 seo优化不好

多页面应用 整个项目是由多个html页面组成 页面跳转是多个页面之间的跳转   a链接 window.location
多页面传值如何传递？  cookie localstorage sessionstorage  location.search
优点： 首屏加载速度快 seo优化较好
缺点：页面跳转加载速度慢



webpack默认配置是单页面可以配置多页面应用
webpack配置多页面配置
entry文件多页面应用为对象，单页面应用可以为对象可以为字符串
配置对应的出口文件和模板
模板通过 HtmlWebpackPlugin进行配置

webpack热模替换（热更新 HMR Hot Module Replace）如何配置
浏览器热更新技术严格的讲，指的是我们开发时能够在浏览器页面中实时看到我们代码的变化产生效果的流程。热更新技术包含了监听本地文件、增量编译构建、代码热替换、socket通信等技术点。
webpack使用的插件
webpack-dev-server
webpack.HotModuleReplacementPlugin

webpack-dev-server做了非常关键的3个动作：
启动静态服务器
开通长连接socket
为打包产物注入HMR代码【使得客户端具备热更新能力】



*/
const {resolve} = require('path'); //node.js的核心模块之一 处理路径 path.resovle()获取当前文件的绝对路径
// 获取插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    // entry:'./src/main.js',
    entry:{
        index:'./src/main.js',
        second111:'./src/app.js'
    },
    output:{
        filename:'[name]-[hash:8].js',//打包之后的文件名字
        path: resolve(__dirname,'dist')//打包之后文件应该在哪个文件夹下
    },
    module:{
        rules:[
            {
                test: /\.css$/i,
                // use执行顺序是由要求 是从右向左
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192,
                    },
                  },
                ],
              },
        ]
    },
    mode:'development',
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            filename:"index.html",
            minify:{
                removeComments:true,
                collapseWhitespace:true
            },
            chunks:['index']
        }),
        new HtmlWebpackPlugin({
            template:"./public/second.html",
            filename:"second.html",
            minify:{
                removeComments:true,
                collapseWhitespace:true
            },
            chunks:['second']
        }),
        // new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()

    ],
    devServer:{
        port:8080,
        open:true,
        compress:true,
        contentBase:resolve(__dirname,'dist')
    }
} 
